<template>
  <div class="layouts">
  	<PageHeader/>
  	<!-- 页面主体开始 -->
  	<div class="page-content error-page">
  		<div class="wrapper wrapper-fixed error-page-inner">
  			<div class="error-content text-center">
  				<h1 class="error-title">很抱歉，您访问的页面不存在或已被删除~</h1>
  				<p class="error-text"><span class="text-red time">{{countDown}}</span> 秒 之后自动返回首页</p>
  				<p><nuxt-link to="/"  class="back-home">返回首页</nuxt-link></p>
  			</div>
  		</div>
  		<PageFooter/>
  	</div>
  </div>
</template>

<script>
// import 'lib-flexible'
import PageHeader from '~/components/Header.vue'
import PageFooter from '~/components/Footer.vue'

export default {
  data: function () {
    return {
      countDown: 10,
      timer: null
    }
  },
  components: {
    PageHeader,
    PageFooter
  },
  mounted: function () {
    var _this = this
    this.timer = window.setInterval(function () {
      if (_this.countDown <= 0) {
        window.location.href = '/'
        window.clearInterval(_this.timer)
      } else {
        _this.countDown--
      }
    }, 1000)
  }
}
</script>
<style lang="less">
//设计稿750px分成100份，1a=7.5px, 1rem=75px, 设计稿中的1px = 1/75rem;
@rpx:1/75rem;
@red: #d41d19;
#__nuxt{
  width:100%;
  height:100%;
}
.layouts{
	width:100%;
	height:100%;
}
.error-page{
	width:100%;
	height:100%;
	padding-bottom:181px;
	.error-page-inner{
		display:table;
		height:100%;
	}
	.error-content{
		display:table-cell;
		vertical-align:middle;
		.error-title{
			font-weight:normal;
			padding:80px 0;
			margin-bottom:40px;
			font-size:30px;
			background: url(/assets/images/404bg.jpg) center center no-repeat;
			background-size:auto 100%;
		}
		.error-text{
			font-size:18px;
			color:#999;
			margin-bottom:0.5em;
		}
		.back-home{
			padding:0.3em 2em;
			display:inline-block;
			color:#fff;
			font-size:22px;
			background-color:@red;
			&:hover{
				background-color:darken(@red, 5%);
				text-decoration:none;
			}
		}
	}
	.footer-box{
		width:100%;
		position:absolute;
		left:0;
		bottom:0;
	}
	@media screen and (max-width:1024px){
		.error-content{
			.error-title{
				padding:60px 0;
				margin-bottom:30px;
				font-size:24px;
			}
			.error-text{font-size:16px;}
			.back-home{font-size:20px;}
		}
	}
	@media screen and (max-width:768px){
		padding-bottom:270px;
		.error-content{
			.error-title{
				padding:50px 0;
				margin-bottom:30px;
				font-size:20px;
			}
			.error-text{font-size:14px;}
			.back-home{font-size:18px;}
		}
	}
	@media screen and (max-width:640px){
		padding-bottom:230px;
	}
}
</style>

